extends ../layout.pug

block content
    h2.text-center.mb-4 Bootswatch 3

    each item in config.files.bootswatch3.themes
        -var name = item.name.toLowerCase();
        -var sri  = item.sri;
        -var file = config.files.bootswatch3.bootstrap.replace('SWATCH_NAME', name).replace('SWATCH_VERSION', config.files.bootswatch3.version);
        -var capitalizedThemeName = helpers.capitalize(name);

        .card.bg-light.my-4.p-4.text-center
            .row
                .col-12.col-md-8.offset-md-2
                    .mt-4
                        a(href=config.files.bootswatch3.link.replace('SWATCH_NAME', name), rel='noopener', target='_blank')
                            img.bootswatch.d-block.img-fluid.mx-auto(src=config.files.bootswatch3.image.replace('SWATCH_NAME', name), alt=`${capitalizedThemeName} theme's thumbnail`, title=`Visit ${capitalizedThemeName} theme's demo page`, width='528', height='317')
                        .input-group.mt-3
                            input.form-control(type='text', readonly, value=file, aria-label=`${capitalizedThemeName} theme's CSS file`)
                            .input-group-append
                                button.btn.btn-dark.dropdown-toggle(type='button', data-toggle='collapse', data-target=`#${name}`, aria-label='Toggle Dropdown', aria-expanded='false', aria-controls=name)
                        span.form-text.text-muted.mb-4 Click to copy

                        include ../_partials/csscode.pug

//- vim: ft=pug sw=4 sts=4 et:
